<template>
  <div class="leave-comment-area">
    <el-rate class="leave-comment-vote" v-model="myComment.score" allow-half/>
    <el-input
        type="textarea"
        class="leave-comment-input"
        placeholder="请输入评论内容"
        style="margin-bottom: 15px"
        :rows="2"
        maxlength="50"
        show-word-limit
        v-model="myComment.description">
    </el-input>
    <el-button type="primary" @click="submitComment">
      提交
    </el-button>
  </div>
</template>

<script>
export default {
  name: "SendCommentArea",
  data(){
    return {
      myComment: {
        score: 0,
        description: ""
      },
    }
  },
  methods: {
    submitComment() {
      this.$emit('submit-comment', this.myComment);
    }
  }
}
</script>

<style scoped>
.leave-comment-area {
  box-shadow: rgba(90, 106, 140, 0.3) 0px 0px 6px;
  border-radius: 12px;
  padding: 15px 15px;
}

.leave-comment-vote {
  margin-bottom: 18px;
}
</style>
